<template>
  <div class="studentDormitory">
    <div
      class="inp1"
      :style="{ height: '100px!important', lineHeight: '100px!important' }"
    >
      <el-select
        v-model="inpValue"
        filterable
        remote
        placeholder="请输入学生姓名"
        :loading="loading"
        id="inp"
        :remote-method='getValue'
        @change="changeStu"
      >
        <el-option
          v-for="(item) in searchList"
          :key="item.sId"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-button icon="el-icon-search" circle @click.native='searchStu'></el-button>
      <el-button type="primary" @click="addItem">添加项目</el-button>
    </div>

    <div
      class="choose"
      :style="{ height: '100px!important', lineHeight: '100px!important' }"
    >
      <span>选择班级: </span>
      <el-select
        placeholder="请选择"
        :style="{ height: '100px!important', lineHeight: '100px!important' }"
        v-model="undifined"
        @visible-change='showSelect'
        @change='classChoosed'
      > 
        <el-option label="全部" value="全部"> </el-option>
        <el-option v-for="(item,index) in classList" :key="index" :label="item" :value="item"> </el-option>
      </el-select>
    </div>

    <!-- 导出excel按钮 -->
    <el-button class="btn" plain icon="iconfont icon-excel" @click="exportExcel">
      导出excel数据
    </el-button>

    <el-table
      border
      style="width: 100%"
      :fit="true"
      :data="studentData"
      v-loading="loading"
    >
      <el-table-column fixed prop="" label="头像" align="center" width="180">
        <template v-slot="{ row }">
          <el-avatar shape="square" :src="row.headimgurl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="degree" label="学历" width="180"> </el-table-column>
      <el-table-column prop="class" label="班级" width="180"> </el-table-column>
      <el-table-column prop="productUrl" label="项目" width="180"> </el-table-column>
      <el-table-column prop="cTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template class="operate" width="200" v-slot="{ row }">
          <el-button type="primary" icon="el-icon-view" @click="looking(row)"
            >查看</el-button
          >
          <el-button type="primary" icon="el-icon-edit" @click="edit(row)"
            >编辑</el-button
          >
          <el-button type="danger" icon="el-icon-delete" @click="delStu(row.sId)">
            删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :pageSize="pagesize"
      @current-change="pageChange"
      hide-on-single-page
    >
    </el-pagination>

    <MyDialog :visible="visible" @cancel="cancel" ref="stuDialog" @ok="ok"></MyDialog>
  </div>
</template>

<script>
import * as studentApi from "@/api/student";
import MyDialog from "@/components/dialog/index.vue";
// 引入导出excel插件
import qee from "qf-export-excel";
export default {
  data() {
    return {
      undifined: "",
      studentData: [],
      visible: false,
      loading: false,
      total: 0,
      pagesize: 0,
      inpValue:'',
      options:[1,2,3,4],
      // 定义存储班级变量
      classList:[],
      // 定义存储搜索变量
      searchList:[]
    };
  },

  mounted() {
    this.getStudentData();
  },

  methods: {
    // 获取学员列表数据的方法
    getStudentData(count = 8, page = 1, classes) {
      studentApi.getStudentData(count, page, classes)
      .then((res) => {
        this.total = res.data.total;
        this.pagesize = res.data.count;
        this.studentData = res.data.data;
      });
    },
    addItem() {
      // 添加学生信息
      // 在点击添加按钮时，要保证dialog中没有数据，清空dialog中的数据
      this.$refs.stuDialog.stuForm = {};

      this.$refs.stuDialog.dialogtitle = "添加学员信息";

      this.visible = true;
    },
    // 子组件(dialog)点击了确定按钮,将学生数据存到服务器
    ok(formData) {
      // 根据dialogTitle字段的不同决定调用增加接口还是编辑接口
      let dialogTitle = this.$refs.stuDialog.dialogtitle;

      if (dialogTitle === "添加学员信息") {
        studentApi.addStu(formData).then((res) => {
          // console.log(res);
          // 如果添加成功，那么更新列表
          if (res.data.state) {
            this.getStudentData();
          }
        });
      } else if (dialogTitle === "编辑学员信息") {
        this.loading = true;
        // 发送编辑请求
        studentApi.editStu(formData).then((res) => {
          // console.log(res);
          if (res.data.state) {
            this.getStudentData();
            this.$message.success("更新成功");
            this.loading = false;
          }
        });
      }

      this.visible = false;
      // console.log(formData);
    },
    cancel() {
      this.visible = false;
    },

    // 编辑
    edit(row) {
      // console.log(row);
      // 让MyDialog子组件中的stuForm等于 被点击的那一条数据
      // 那么展示的就是被选中的数据，数据回选
      this.$refs.stuDialog.stuForm = { ...row };
      this.$refs.stuDialog.dialogtitle = "编辑学员信息";
      this.visible = true;
    },

    // 删除学员
    delStu(sId) {
      // console.log(sId);
      this.$confirm("该操作将永久删除数据，是否继续", "删除提示", {
        type: "success",
      })
        .then(async () => {
          let res = await studentApi.delStu(sId);
          // console.log(res);
          if (res.data.state) {
            this.getStudentData();
          }
        })
        .catch(() => {
          this.$message.success("已取消删除");
        });
    },

    // 页码改变时的方法
    pageChange(pagesize) {
      // console.log(pagesize);
      this.getStudentData(undefined, pagesize);
    },

    // 导出excel
    exportExcel() {
      // 导出的字段有哪些?
      let titleList = [
        {
          title: "头像地址",
          key: "headimgurl",
        },
        {
          title: "名字",
          key: "name",
        },
        {
          title: "年级",
          key: "degree",
        },
      ];

      //  调用导出方法

      qee(titleList, this.studentData, "学生信息2205");
    },

    // 查看
    looking(row) {
      this.$router.push({
        name: "home-StudentManager-StudentProduct",
        query: row,
      });
    },



  //  下拉框出现或隐藏的回调
    showSelect(flag){
      // flag只是一个用来接受组件回调的参数，如果下拉框打开，参数为true，否则为false
      // 如果下拉框打开，那么就需要发送请求获取班级信息
      if(flag){
        studentApi.classInfo()
        .then(res => {
          this.classList = res.data.data
        })
      }
    },


    // select中的值发生改变时的回调
    // 参数choosevalue是选中的值
    classChoosed(choosevalue){
      // 根据班级获取学生数据
      if(choosevalue === '全部'){
        this.getStudentData()
      }else{
        this.getStudentData(0,0,choosevalue)
      }
    },



    // 点击按钮，搜索学生
    searchStu(){
      this.changeStu(this.inpValue)
    },


    // 输入内容触发回调,参数是输入的值
    getValue(val){
      //  改变双向绑定的数据
      this.inpValue = val
      studentApi.searchStudent(val)
      .then(res => {
        this.searchList = res.data.data
        // console.log(res.data.data);
      })
    },

    
    changeStu(option){
      studentApi.searchStudent(option)
      .then(res=>{
        this.total = res.data.total;
        this.pagesize = Math.ceil(this.total/8)
        this.studentData = res.data.data;
      })
    }
  },



 


  meta: { title: "xyxmgl", icon: "iconfont icon-shouye" },

  components: {
    MyDialog,
  },
};
</script>

<style scoped lang="less">
/deep/.el-button {
  margin-bottom: 10px;
  align-self: flex-end;
}
/deep/.el-table__body tr td .cell {
  display: flex;
  justify-content: center;
}

/deep/.el-table__body tr td .cell .el-button {
  width: 65px;
  height: 25px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

/deep/.el-button.is-circle {
  border-radius: 5px;
  width: 56px;
  background: #ecf5ff;
}
/deep/.el-input {
  width: 300px !important;
}

.studentDormitory {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/deep/.el-table__header tr {
  height: 30px;
  line-height: 30px;
}

/deep/.el-table__header tr th .cell {
  text-align: center !important;
}

/deep/.el-table__body tr {
  height: 80px;
  line-height: 80px;
}
/deep/.el-table__body .el-table__row .cell {
  display: flex !important;
  justify-content: space-around !important;
}

/deep/.el-table__header tr th:first-child {
  width: 100px;
}
/deep/.el-table__header tr th:first-child .cell {
  width: 100px;
}
/deep/.el-pagination {
  align-self: center;
}
</style>
